<template>
  <div class="create-sop-main">
    <NavigationBarBack title="创建标准SOP" />
    <div class="create-sop-wrap">
      <div class="config-box">
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">基本设置</div>
          </div>
          <div class="card-body">
            <div class="alter-box">
              <div class="warning-svg">
                <svg-icon class-name="warning-svg" icon-class="warning" />
              </div>
              <div class="waring-text">
                <div>手动创建SOP任务，创建完成后下发至单号模式下发送</div>
              </div>
            </div>
            <el-form ref="form" :model="form" label-width="120px" class="create-sop-form" label-position="left">
              <el-form-item label="所属公司：">
                <div class="company-name">安徽志新科技有限公司</div>
              </el-form-item>
              <el-form-item label="下发企微号：">
                <el-button plain icon="el-icon-plus" size="small">选择企微号</el-button>
              </el-form-item>
              <el-form-item label="发送对象：">
                <div class="control-content">
                  <div class="head">
                    <div class="checkbox">
                      <el-checkbox v-model="customer"><span style="color: #000;">客户</span></el-checkbox>
                      <div class="radio-content">
                        <el-radio-group v-model="form.customer">
                          <el-radio :label="0"><span style="color: #000;">所有客户</span></el-radio>
                          <el-radio :label="1"><span style="color: #000;">筛选客户</span></el-radio>
                        </el-radio-group>
                      </div>
                    </div>
                    <div>
                      <span style="color: #3070ff;cursor: pointer;">点此计算可见客户数</span>
                      <el-tooltip class="item" effect="dark" placement="top">
                        <div slot="content">此处计算得出的是当前符合所选条件<br />的客户数，仅供参考，最终触达客<br />户数以群发后实际触达人数为准</div>
                        <svg-icon icon-class="question" style="margin-left: 4px;" />
                      </el-tooltip>
                    </div>
                  </div>
                  <div class="body">
                    <div class="tc-secondary" style="color:rgba(0,0,0,.25);" v-if="form.customer === 0">
                      <svg-icon icon-class="warning-border" /> 选中企微号的所有客户
                    </div>
                    <ConditionForm v-else />
                  </div>
                </div>
                <div class="control-content">
                  <div class="head">
                    <div class="checkbox">
                      <el-checkbox v-model="customer"><span style="color: #000;">客户群</span></el-checkbox>
                      <div class="radio-content">
                        <el-radio-group v-model="form.customerGroup">
                          <el-radio :label="0"><span style="color: #000;">所有客户群</span></el-radio>
                          <el-radio :label="1"><span style="color: #000;">筛选客户群</span></el-radio>
                        </el-radio-group>
                      </div>
                    </div>
                  </div>
                  <div class="body">
                    <div class="tc-secondary" style="color:rgba(0,0,0,.25);" v-if="form.customerGroup === 0">
                      <svg-icon icon-class="warning-border" /> 选中企微号的所有客户群
                    </div>
                    <ConditionGroupForm v-else />
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="效果追踪：">
                <el-switch size="small" v-model="form.switch"/>
              </el-form-item>
              <el-form-item label="SOP模版：">
                <el-select
                  v-model="form.labeltype"
                  placeholder=""
                  size="small"
                  style="width: 115px"
                >
                  <el-option label="企业模板库" :value="1"></el-option>
                  <el-option label="个人模板库" :value="2"></el-option>
                </el-select>
              <el-select
                v-model="form.labeltype"
                placeholder=""
                size="small"
                style="width: 340px"
              >
                <el-option label="含任意关键词" :value="0">
                  <span class="select-label">11111</span>
                  <span class="select-tag">标准模板</span>
                </el-option>
                <el-option label="含任意关键词" :value="1">
                  <span class="select-label">11111</span>
                  <span class="select-tag">标准模板</span>
                </el-option>
              </el-select>
              <el-button type="primary" icon="el-icon-plus" size="small" style="margin-left: 8px;" />
              <div class="desc">标准SOP只能调用“标准模板”</div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="create-sop-footer">
      <el-button size="small" plain>取消</el-button>
      <el-button size="small" type="primary">确定</el-button>
    </div>
  </div>
</template>
<script>
import NavigationBarBack from '@/components/NavigationBarBack'
import ConditionForm from '../components/conditionForm'
import ConditionGroupForm from '../components/conditionGroupForm.vue'
export default {
  data() {
    return {
      customer: 0,
      form: {
        customer: 0,
        customerGroup: 0,
        switch: false,
        labeltype:1
      }
    }
  },
  components: {
    NavigationBarBack,
    ConditionForm,
    ConditionGroupForm
  }
}
</script>
<style lang="scss" scoped>
.create-sop-main {
  height: calc(100vh - 48px);
  overflow: auto;
  position: relative;
  .create-sop-wrap {
    margin: 12px 12px 76px;
    .config-box {
      margin: 0 auto;
      width: 1000px;
      display: flex;
      flex-direction: column;
  
      .config-settig-card {
        background: #ffffff;
        margin-top: 12px;
        flex: 1 1;
        text-align: left;
        text-align: initial;
        color: rgba(0, 0, 0, 0.85);
        border-radius: 4px;
        background: #fff;
        font-size: 14px;
  
        .card-head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #e9e9e9;
  
          .card-title {
            padding: 16px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
          }
        }
  
        .card-body {
          padding: 24px;
  
          .alter-box {
            box-sizing: border-box;
            margin: 0;
            color: rgba(0, 0, 0, .65);
            font-size: 14px;
            background-color: #f0f7ff;
            border: 1px solid #abceff;
            font-variant: tabular-nums;
            line-height: 24px;
            position: relative;
            display: flex;
            padding: 8px 15px;
            word-wrap: break-word;
            border-radius: 4px;
  
            .warning-svg {
              font-size: 18px;
            }
  
            .waring-text {
              margin-left: 8px;
            }
          }
  
          .create-sop-form {
            margin-top: 20px;
            .control-content {
              width: calc(100% - 150px);
              color: rgba(0, 0, 0, .65);
              font-size: 14px;
              font-variant: tabular-nums;
              line-height: 1.5715;
              margin-top: 20px;
              .head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 46px;
                background: #f5f6f7;
                border-radius: 2px;
                border: 1px solid #e9e9e9;
                padding: 0 16px;
                .checkbox {
                  display: flex;
                  align-items: center;
                  .radio-content {
                    margin-left: 24px;
                    padding: 4px 16px;
                    border-radius: 16px;
                    background-color: #fff;
                    border: 1px solid #e9e9e9;
                  }
                }
              }
              .body {
                padding: 16px;
                line-height: 22px;
                border: 1px solid #e9e9e9;
                border-top: none;
                .form-card {
                  .header {
                    height: 48px;
                    padding: 0 12px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    background: #fff;
                    border: 1px solid #f0f0f0;
                    border-radius: 4px 4px 0 0;
                    .flex-btns {
                      display: grid;
                      column-gap: 8px;
                      grid-template-columns: 22px 22px;
                      .ic-btn {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border: 2px solid #3070ff;
                        font-weight: bold;
                        height: 22px;
                        color: #3070ff;
                      }
                    }
                  }
                  .card-wrap {
                    padding: 16px;
                    background: #f9f9f9;
                  }
                }
              }
            }
            .desc {
              color: rgba(0, 0, 0, 0.45);
              font-size: 12px;
              margin: 8px 0px 12px;
              height: 20px;
              line-height: 20px;
            }
          }
        }
      }
    }
  }
  .create-sop-footer {
    position: fixed;
    left: 226px;
    right: 0;
    bottom: 0;
    background: #ffffff;
    padding: 12px 16px;
    display: flex;
    align-content: center;
    justify-content: center;
  }
}
.select-label {
  float: left;
  color: rgba(0, 0, 0, .65);
  font-weight: 400;
  font-size: 12px;
  cursor: pointer;
}
.select-tag {
  line-height: 20px;
  white-space: nowrap;
  background: #fafafa;
  border: 1px solid #e9e9e9;
  border-radius: 4px;
  padding: 2px 7px;
  float: right;
  font-weight: 400;
  color: rgba(0,0,0,.65);
  font-size: 12px;
  margin: auto;
} 
</style>